import Watcher from '../watcher.js'

/*
 * @Author: zengwj
 * @Date: 2022-08-10 10:33:54
 * @LastEditors: zengwj
 * @LastEditTime: 2022-08-10 15:29:36
 * @Description:
 */
export default function compileAttribute(node, vm) {
	//类数组转换
	const attrs = [...node.attributes]
	for (let attr of attrs) {
		const { name, value } = attr
		if (name.match(/v-on:click/)) {
			// v-on:click
			compileVonClick(node, value, vm)
		} else if (name.match(/v-bind:(.*)/)) {
			// v-bind
			compileVBind(node, value, vm)
		} else if (name.match(/v-model/)) {
			// v-model
			compileVModel(node, value, vm)
		}
	}
}

function compileVonClick(node, method, vm) {
	node.addEventListener('click', function (...args) {
		vm.$options.methods[method].apply(vm, args)
	})
}

function compileVBind(node, attrValue, vm) {
	const attrName = RegExp.$1
	node.removeAttribute(`v-bind:${attrName}`)
	function cb() {
		node.setAttribute(attrName, vm[attrValue])
	}
	// 实例化watcher 当属性值变化时候，dep通知watcher 执行update cb被执行，更新属性
	new Watcher(cb)
}

function compileVModel(node, key, vm) {
	let { tagName, type } = node
	tagName = tagName.toLowerCase()
	if (tagName === 'input' && type === 'text') {
		// <input type="text" v-model="inputVal" />

		// 设置 input 输入框的初始值
		node.value = vm[key]
		// 给节点添加 input 事件，当事件发生时更改响应式数据
		node.addEventListener('input', function () {
			vm[key] = node.value
		})
		new Watcher(() => {
			node.value = vm[key]
		})
	} else if (tagName === 'input' && type === 'checkbox') {
		// <input type="checkbox" v-model="isChecked" />

		// 设置选择框的初始状态
		node.checked = vm[key]
		// 给节点添加 change 事件，当事件发生时更改响应式数据
		node.addEventListener('change', function () {
			vm[key] = node.checked
		})
	} else if (tagName === 'select') {
		// <select v-model="selectedValue"></select>

		// 设置下拉框初始选中的选项
		node.value = vm[key]
		// 添加 change 事件，当事件发生时更改响应式数据
		node.addEventListener('change', function () {
			vm[key] = node.value
		})
	}
}
